import './index.less';
import React from 'react';
import { Row, Col, Select } from 'antd';

const { Option } = Select;
const WEEK = ['日', '一', '二', '三', '四', '五', '六'];
const years = [2019, 2020, 2021, 2022, 2023];
const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

class CalendarSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            now: new Date(), // 现在的时间
            year: (new Date()).getFullYear(), // 今年的年份
            month: (new Date()).getMonth(), // 今天所在月份
            date: (new Date()).getDate(), // 今天的日期
            current: '', // 当前选中日期
        };
    }

    componentDidMount() {
        let { year, month } = this.state;
        console.log(year, month);
    }

    onDateClick(day) { // 选中日期
        if (day) {
            let { month, year } = this.state,
                { onSelect } = this.props,
                monthChange = month < 9 ? `0${month + 1}` : month + 1,
                dayChange = day < 10 ? `0${day}` : day,
                current = `${year}-${monthChange}-${dayChange}`;
            this.setState({
                current,
            });
            onSelect && onSelect(current);
        }
    }

    getMonthDays(year, month) { // 获取某个月的天数
        if (month === 3 || month === 5 || month === 8 || month === 10) {
            return 30;
        } if (month === 1) {
            if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { // 闰年
                return 29;
            }
            return 28;
        }
        return 31;
    }

    renderLines() { // 渲染每一行
        let arr = [],
            { year, month } = this.state,
            firstDay = (new Date(year, month, 1)).getDay(), // 某个月第一天在周几
            dayCount = this.getMonthDays(year, month), // 某个月有几天
            lines = Math.ceil((firstDay + dayCount) / 7);// 日历有几行
        for (let i = 0; i < lines; i++) {
            arr.push(i);
        }
        return arr.map((line) => <Row key={line}>{this.renderDates(line, firstDay, dayCount)}</Row>);
    }

    renderDates(line, firstDay, dayCount) { // 渲染日期
        let weekdays = [];
        for (let i = 0; i < 7; i++) {
            if (line === 0) {
                weekdays.push(i < firstDay ? '' : (i - firstDay + 1));
            } else {
                weekdays.push((line * 7 + i - firstDay + 1) > dayCount ? '' : (line * 7 + i - firstDay + 1));
            }
        }
        return weekdays.map((day, i) => {
            let { now, year, month, date, current } = this.state,
                today = (now.getFullYear() === year && now.getMonth() === month && day === date),
                back = today ? 'back-today' : '',
                curMonth = month < 9 ? `0${month + 1}` : month + 1,
                curDay = day < 10 ? `0${day}` : day,
                isCurrent = current === `${year}-${curMonth}-${curDay}`;
            return (
                <Col key={i}
                    className={`daybox ${back} ${day ? 'back-matter-h' : ''} ${isCurrent ? 'back-matter' : ''}`}
                    onClick={() => this.onDateClick(day)} span={3}
                >
                    {day}
                </Col>
            );
        });
    }

    render() {
        const { year, month } = this.state;
        return (
            <div className="calendarSelect">
                <div className="calendar">
                    <Row>
                        <Col span={21}>
                            <div className="fr">
                                <Select onChange={(val) => this.setState({ year: val })} size="small"
                                    style={{ width: 90 }} value={year}
                                >
                                    {years.map((item) => (
                                        <Option key={item} value={item}>
                                            {item}
                                            年
                                        </Option>
                                    ))}
                                </Select>
                                <Select onChange={(val) => this.setState({ month: val })} size="small"
                                    style={{ width: 80, marginLeft: 10 }} value={month}
                                >
                                    {months.map((item) => (
                                        <Option key={item} value={item}>
                                            {parseInt(item) + 1}
                                            月
                                        </Option>
                                    ))}
                                </Select>
                            </div>
                        </Col>
                    </Row>
                    <div className="txt-c mb-20 mt-10">
                        <Row>
                            {WEEK.map((v, i) => <Col key={i} className="daybox back-thead" span={3}>{v}</Col>)}
                        </Row>
                        {this.renderLines()}
                    </div>
                </div>
            </div>
        );
    }
}
export default CalendarSelect;
